import {
  Tabs,
  Popup,
  PullToRefresh,
  InfiniteScroll,
  SearchBar,
} from "antd-mobile";
import { useInitialState } from "@/utils/use-initial-state";
import { getArticleList, getUserChannel } from "../../store/actions/home";
import style from "./index.module.scss";
import Channels from "./components/Channels";
import { useState } from "react";
import Icon from "@/components/Icon";
import { useDispatch, useSelector } from "react-redux";
import ArticleItem from "./components/ArticleItem";
import ArticleList from "./components/ArticleList";
import { HomeAction, RootState } from "@/types/store";
import { SearchOutline } from "antd-mobile-icons";
import { useHistory } from "react-router-dom";
const Home = () => {
  const history = useHistory();
  useInitialState(getUserChannel, "home");
  const [visible, setVisible] = useState(false);
  const { userChannel } = useInitialState(getUserChannel, "home");
  const dispatch: any = useDispatch();
  const [hasMore, setHasMore] = useState(true);
  const { channelActiveKey } = useSelector((state: RootState) => state.home);
  const onTabChange = (key: string) => {
    dispatch({ type: "home/changeTab", payload: key });
  };
  // 弹框打开事件
  const onChannelOpen = () => {
    setVisible(true);
  };

  // 弹框关闭事件
  const onChannelClose = () => {
    setVisible(false);
  };
  // 下拉刷新列表文章
  // const onRefresh = async () => {
  //   await dispatch(getArticleList(channelId, Date.now() + ""));
  // };

  return (
    <div className={style.root}>
      {/* 延迟渲染 Tabs，解决 tab 高亮位置错误 */}
      <div
        style={{
          position: "fixed",
          right: "0px",
          top: "10px",
          backgroundColor: "#fff",
          zIndex: "10",
          width: "30px",
          height: "20px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Icon type="iconbtn_channel" onClick={onChannelOpen} />
      </div>
      <div
        style={{
          position: "fixed",
          right: "0px",
          top: "30px",
          backgroundColor: "#fff",
          zIndex: "10",
          width: "30px",
          height: "20px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Icon
          type="iconbtn_search"
          onClick={() => history.push("/search")}
        />
      </div>
      <div className="tabs-opration">
        {userChannel.length > 0 && (
          <Tabs
            className="tabs"
            activeLineMode="fixed"
            activeKey={channelActiveKey}
            onChange={onTabChange}
          >
            {/* 直接使用 Tabs.TabPane */}
            {userChannel.map((item: any) => (
              <Tabs.Tab title={item.name} key={item.id}>
                <ArticleList type={0} channelId={item.id} />
              </Tabs.Tab>
            ))}
          </Tabs>
        )}
      </div>
      <Popup
        visible={visible}
        onMaskClick={onChannelClose}
        position="left"
        className="channel-popup"
      >
        <Channels onClose={onChannelClose} />
      </Popup>
      {/* <PullToRefresh onRefresh={onRefresh}>
        {renderArticleList()}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </PullToRefresh> */}
    </div>
  );
};

export default Home;
